{extend name="layout:layout" /}

{block name="title"}树形菜单{/block}

{block name="stylesheet"}
<link type="text/css" rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/z_tree/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
{/block}

{block name="body"}
<div style="padding: 15px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3">
                <div class="panel panel-success">
                    <div class="panel-heading">树形菜单</div>
                    <div class="panel-body">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="panel panel-info">
                    <div class="panel-heading">Content</div>
                    <div class="panel-body">
                        <iframe name="myFrame" id="myFrame"
                                style="width: 100%;height: 700px;border: 1px solid #fff;"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="javascript"}
<script type="text/javascript" src="__STATIC__/z_tree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="__STATIC__/z_tree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="__STATIC__/z_tree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="__STATIC__/backend/javascript/dw_form_submit.js"></script>
<script type="text/javascript">
    $(function () {
        var setting = {
            view: {
                addHoverDom: addHoverDom,//显示按钮
                removeHoverDom: removeHoverDom,//不显示按钮
                selectedMulti: false
            },
            check: {
                enable: true//显示选择框
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true,
                removeTitle: '删除节点',
                renameTitle: '重命名'
            },
            callback: {
                onClick: zTreeOnClick,
                beforeRemove: zTreeBeforeRemove,
                beforeRename: zTreeBeforeRename
            }
        };
        //加载数据
        $.post("loadTree.html", {}, function (obj) {
            var zNodes = obj.data;
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        //鼠标移到节点上时显示添加，编辑，删除按钮
        var newCount = 1;

        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                    + "' title='添加节点' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, {id: (100 + newCount), pId: treeNode.id, name: "新节点" + (newCount++)});
                return false;
            });
        }

        //鼠标离开节点的时候移除添加，编辑，删除按钮
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        }

        //点击节点事件
        function zTreeOnClick(event, treeId, treeNode) {
            console.log(treeNode);
            window.frames['myFrame'].location = treeNode.url;
        }

        //点击删除按钮事件
        function zTreeBeforeRemove(treeId, treeNode) {
            console.log(treeNode);
            layui.use(['layer'], function () {
                //通过ajax请求删除数据，如果成功移除节点，否则不移除
                if (true) {

                } else {
                    return false;
                }
            });
        }

        //点击修改节点按钮
        function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
            console.log(isCancel);
            console.log(treeNode);
            console.log(newName);
            //不是取消，通过AJAX提交数据修改并返回结果
            if (isCancel == undefined) {
                console.log(treeNode);
            }
        }
    });
</script>
{/block}